<template>
  <div ref="containerRef" style="display: flex;height: 100%;">
    <div>
      <el-table :data="tableData" style="width: 100%" @row-contextmenu="rowContextMenu">
        <el-table-column prop="name" label="名字" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="class" label="年级" width="180" />
      </el-table>
      <right-menu :menus="menus" ref="rightClickMenuRef" />
    </div>
    <chat-container />
  </div>
</template>

<script setup lang="ts">
import type { TableColumnCtx } from 'element-plus';
import { ref, onMounted, type Raw } from 'vue';
import RightMenu from '@/components/rightMenu.vue'

// 导入图标
import { FolderAdd, Message } from '@element-plus/icons-vue';
import { markRaw } from 'vue';
import ChatContainer from '@/components/chatContainer.vue'

const containerRef = ref<HTMLDivElement | null>()

onMounted(() => {
  containerRef.value?.addEventListener("contextmenu", function (event) {
    return;
    event.preventDefault();
  });
})

const tableData = [
  {
    name: '张三',
    age: '18',
    class: '一年级',
  },
  {
    name: '李四',
    age: '18',
    class: '二年级',
  },
  {
    name: '王五',
    age: '20',
    class: '三年级',
  },
]

const rightClickMenuRef = ref<typeof RightMenu>()
// 菜单
const menus = ref<{
  icon?: Raw<unknown>,
  name?: string,
  click?: () => void
}[]>([]);
const rowContextMenu = (row: unknown, column: TableColumnCtx<typeof tableData[0]>, event: Event) => {
  console.log(`output->row, column, event`, row, column, event)

  // 构建菜单
  menus.value = [{
    icon: markRaw(FolderAdd),
    name: "发送到-1",
    click: () => {
      console.log("发送到-1");
    }
  }, {
    icon: markRaw(Message),
    name: "复制",
    click: () => {
      console.log("菜单名称-2");
    }
  }, {
    icon: undefined,
    name: "选中",
    click: () => {
      console.log("菜单名称-3");
    }
  }];
  // 打开右键菜单
  rightClickMenuRef.value?.open(event);
}
</script>


<style scoped></style>
